<template>
    <div id="head-first">
        <h1 style=" color: aliceblue;">
            JAVA SE基础
        </h1>
        <el-button type="primary" @click="dialogVisible=true">
            <el-icon><CirclePlus /></el-icon>
            新建线程
        </el-button>
    </div>
    <div class="theme_search">
        <el-form label-position="top" label-width="800">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="标题:">
                        <el-input placeholeder="请输入……" 
                        @keydown.enter="loadThemeByThemeCode()"
                        v-model="searchForm.title"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="内筒:">
                        <el-input placeholeder="请输入……"
                        @keydown.enter="loadThemeByThemeCode()"
                        v-model="searchForm.message"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item label="作者:">
                        <el-input placeholeder="请输入……"
                        @keydown.enter="loadThemeByThemeCode()"
                        v-model="searchForm.author"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="选择时间:">
                        <el-date-picker
                        v-model="createTime"
                        type="dateTime"
                        placeholder="请选择……"
                        :disabled-date="disabledDate"
                        :shortcuts="shortcuts"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        size="default"
                        @change="loadThemeByThemeCode()"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row justify="space-evenly">
                <el-tag v-for="tag in tags" :key="tag" effect="dark">
                    {{ tag.description }}
                </el-tag>    
            </el-row>
        </el-form>
        
    </div>
    <div class="article_card" v-for="article in articleArray">
        <div class="user_image">
            <el-avatar :size="80">{{ article.userVo.username }}</el-avatar>
        </div>
        <div class="content">
            <el-link size="large" type="success" underline="never" @click="router.push('/article/detail?id='+article.id)">
                <h3 class="title">标题：{{ article.title }}</h3>
            </el-link>
            <p class="tag" v-if="article.tags.length != 0">标签：
                <el-tag v-for="tag in article.tags" :key="tag.description" type="primary" effect="plain">
                    <el-link type="info">{{ tag.description }}</el-link>
                </el-tag>
            </p>
            <p class="create">创建时间：{{ article.createTime }}</p>
            <p class="description">描述：{{ article.description }}</p>
            <p class="message">内容：{{ article.message.substring(0,20) }}……
                <el-link type="primary" size="large" @click="router.push('/article/detail?id='+article.id)">查看详情</el-link>
            </p>
            <p style="text-align: right;">
                <el-badge :value="article.comments.length" color="green">
                    <el-button type="primary" 
                    style="background-color: rgba(0, 0, 0, 0);border: none;" 
                    effect="dark">
                    评论
                    </el-button>
                </el-badge>
                <el-badge :value="article.likes" color="green">
                    <el-button type="primary" 
                    style="background-color: rgba(0, 0, 0, 0);border: none;" 
                    effect="dark">
                    喜欢
                    </el-button>
                </el-badge>
                <el-badge :value="article.hates" color="green">
                    <el-button type="primary" 
                    style="background-color: rgba(0, 0, 0, 0);border: none;" 
                    effect="dark">
                    踩
                    </el-button>
                </el-badge>
            </p>
        </div>
    </div>
    <div>
         <el-pagination
         v-model:current-page="currentPage"
         v-model:page-size="pageSize"
         v-model:total="total"
         layout="prev,pager,next,sizes,total"
         :page-sizes="[1,2,4,6,8,10]"
         background
         :default-current-page="1"
         @current-change="handlerPageChange"
         @size-change="handlerSizeChange"
         >
         </el-pagination>
    </div>
    <div id="dialog" v-if="dialogVisible">
        <el-splitter layout="vertical">
            <el-splitter-panel >
                <el-contanier>
                    <el-header height="15%">
                        <div id="submit-article">
                            <p style="font-size: 1.2em;color: aliceblue;">你好世界</p>
                            <el-button @click="close()" size="large"
                            :dark="true"
                            color="#626aef"
                            style="border: none;">
                                <el-icon>
                                    <CloseBold />
                                </el-icon>
                            </el-button>
                        </div>
                    </el-header>
                    <el-container>
                        <el-aside width="40%">
                            <el-form label-position="top"style="padding: 20px;">
                                <el-row :gutter="30">
                                    <el-col :span="10">
                                        <el-form-item label="标题">
                                            <el-input placeholder="请输入……" v-model="saveForm.title"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="10">
                                        <el-form-item label="简介：">
                                            <el-input placeholder="请输入……" v-model="saveForm.description"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-checkbox-group v-model="checkedTag">
                                        <el-checkbox v-for="tag in tags"  
                                        :label="tag.description" 
                                        :value="tag.code"
                                        @change="handlerCheckedTags()"/>
                                    </el-checkbox-group>
                                </el-row>
                            </el-form>
                        </el-aside>
                        <el-main>
                            <el-form label-position="top" style="padding: 40px;">
                              
                                    <el-form-item label="内容：">
                                        <el-input type="textarea" :rows="12" v-model="saveForm.message"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="warning">取消</el-button>
                                        <el-button type="primary" @click="submit()">提交</el-button>
                                    </el-form-item>
                            </el-form>
                        </el-main>
                    </el-container>
                </el-contanier>
            </el-splitter-panel>
        </el-splitter>
    </div>
</template>

<script setup>
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import qs from 'qs';

const articleArray = ref([]);


const themeCode =new URLSearchParams(window.location.search).get('themeCode');

//定义绑定创建时间的变量
const createTime = ref('');
//定义时间滑槽
const shortcuts = [
    {text:'今天',value:new Date()},
    {text:'三天前',value:()=>{
        const data = new Date();
        data.setTime(data.getTime() - 3600 * 1000 * 24 * 3);
        return data;
    }},
    {text:'一星期前',value:()=>{
        const data = new Date();
        data.setTime(data.getTime() - 3600 * 1000 * 24 * 7);
        return data;
    }},
    {text:'一个月前',value:()=>{
        const data = new Date();
        data.setTime(data.getTime() - 3600 * 1000 * 24 * 30);
        return data;
    }},
    {text:'三个月前',value:()=>{
        const data = new Date();
        data.setTime(data.getTime() - 3600 * 1000 * 24 * 30 * 3);
        return data;
    }},
    {text:'一年前',value:()=>{
        const data = new Date();
        data.setTime(data.getTime() - 3600 * 1000 * 24 * 30 * 24);
        return data;
    }},
    {text:'三年前',value:()=>{
        const data = new Date();
        data.setTime(data.getTime() - 3600 * 1000 * 24 * 30 * 24 * 3);
        return data;
    }},
];

//定义搜索表单
const searchForm = ref({
    title:'',
    message:'',
    author:''
});

//配置分页功能
const pageSize = ref(4);
//总条目数量
const total = ref(0);
//当前页码
const currentPage = ref(1);

//定义变量显示新增弹窗
const dialogVisible = ref(false);

//定义变量存放当前主题的比起标签
const tags = ref([]);

//定义变量存放文章的标签
const checkedTag = ref([]);

//定义变量用来保存文章
const saveForm = ref({
    title:'',
    description:'',
    message:''
});

//获取当前用户
const currentUser = JSON.parse(localStorage.getItem('user'));

function disabledDate(date) {
    return date.getTime() > new Date().getTime();
}

onMounted(()=>{
    loadThemeByThemeCode();
    loadTags();

});

function loadThemeByThemeCode() {
    console.log(`当前主题id是${themeCode}`);
    searchForm.value.themeCode = themeCode;
    searchForm.value.pageSize = pageSize.value;
    searchForm.value.currentPage = currentPage.value;
    searchForm.value.createTime = createTime.value;
    let data = qs.stringify(searchForm.value);
    axios.get(BASE_URL+'/v1/article/query?'+data)
    .then((response)=>{
        if(response.data.code == 0) {
            total.value = response.data.data.total;
            articleArray.value = response.data.data.data;
            console.log(articleArray.value);
        }
        else {
            ElMessage.error('网络波动，请稍后再试');
        }
    });
}
 
function handlerPageChange(number) {
    console.log('当前页码是'+number);
    loadThemeByThemeCode();

}

function handlerSizeChange(number) {
    console.log('当前页码'+number);
    loadThemeByThemeCode();
}

function loadTags() {
//寻找标签
axios.get(BASE_URL+'/v1/article/tags?themeCode='+themeCode)
.then((response)=>{
    if (response.data.code == 0) {
        tags.value = response.data.data;
    }
    else {
        ElMessage.error('发生错误！请稍后再试');
    }
});
};

function handlerCheckedTags(data) {
    console.log(checkedTag.value);
}


//关闭弹窗，清除数据
function close() {
    dialogVisible.value = false;
    checkedTag.value = [];
}

//提交表单
function submit() {
    saveForm.value.userId = currentUser.id;
    saveForm.value.tags = checkedTag.value;
    saveForm.value.themeCode = themeCode;
    console.log(saveForm.value);
    let data = qs.stringify(saveForm.value);
    axios.post(BASE_URL+'/v1/article/save',data)
    .then((response)=>{
        if (response.data.code == 0) {
            ElMessage.success('发布成功！');
            searchForm.value = {};
            checkedTag.value = [];
            dialogVisible.value = false;
            loadThemeByThemeCode();
        }
        else {
            ElMessage.error('发布失败！很抱歉');
        }
    });
};


</script>

<style>

#head-first {
display: flex;
border-bottom: 1px solid orange;
margin-bottom: 20px;
padding: 20px 0;
align-items: center;
justify-content: space-between;
}

.article_card {
    margin: 20px 0;
    width: 100%;
    display: flex;
    gap: 5%;
    border: 1px solid lightblue;;
}

.user_image {
    width: 30%;;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #fff;
}
.content {
    padding: 20px;
    width: 60%;
}

.content h3 {
    margin: 20px 0;
}

.tag {
    font-size: 0.85em;
    color: #fff;
    margin-bottom: 10px;
}

.create {
    font-size: 0.85em;
    color: #fff;
    margin-bottom: 10px;
}

.description {
    font-size: 0.85em;
    color: #fff;
    margin-bottom: 10px;
}

.message {
    font-size: 1.1em;
    color: #fff;
    margin-bottom: 10px;
}

.el-tag {
    background-color: rgba(0, 0, 0, 0);
}

#dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 600px;
    background-color:#000;
    z-index: 9999;
}

#submit-article {
    display: flex;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
}
</style>